<template>
  <div id="el">
    <h1>Rendering Dynamic Big Table</h1>
    <p>
      Reference:
      <a
        href="http://insin.github.io/ui-lib-samples/large-datasets/index.html"
      >insin/ui-lib-samples/large-datasets</a>
    </p>

    <p>
      <span>{{ rows }} x {{ cols }}, {{ optimized ? '使用freeze' : '不使用freeze' }} . {{ msg }}</span>
    </p>

    <p>
      <button v-if="optimized" @click="loadBase">Disable optimization</button>
      <button v-else @click="loadOptimized">Enable optimization (Object.freeze)</button>
      <button @click="unmount">Unmount</button>
      <button @click="rerender">Rerender with fresh data</button>
    </p>

    <form>
      <strong>Filter Data</strong>:
      <input type="text" v-model="filter">

      <!--
          If the user is filtering the data, we want to offer some insight into
          the breadth of the filtering.
      -->
      <span v-if="filter">
        &mdash;
        Filtering
        <strong>{{ filter }}</strong>
        over {{ dataPoints }} data points,
        {{ visibleCount() }} found.
      </span>
    </form>

    <table width="100%" cellspacing="2" :class="{ filtered: filter }">
      <tr v-for="row in grid">
        <th>{{ row.id }}</th>
        <td
          v-for="item in row.items"
          class="item"
          :class="{ hidden: !matches(item) }"
        >{{ item.value }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
function generateGrid(rowCount, columnCount) {
  var valuePoints = [
    "Daenerys",
    "Jon",
    "Sansa",
    "Arya",
    "Stannis",
    "Gregor",
    "Tyrion",
    "Theon",
    "Joffrey",
    "Ramsay",
    "Cersei",
    "Bran",
    "Margaery",
    "Melisandre",
    "Daario",
    "Jamie",
    "Eddard",
    "Myrcella",
    "Robb",
    "Jorah",
    "Petyr",
    "Tommen",
    "Sandor",
    "Oberyn",
    "Drogo",
    "Ygritte"
  ];
  var valueIndex = 0;
  var grid = [];
  for (var r = 0; r < rowCount; r++) {
    var row = {
      id: r,
      items: []
    };
    for (var c = 0; c < columnCount; c++) {
      row.items.push({
        id: r + "-" + c,
        value: valuePoints[valueIndex]
      });
      if (++valueIndex >= valuePoints.length) {
        valueIndex = 0;
      }
    }
    grid.push(row);
  }
  return grid
}
export default {
  name: "HelloWorld",
  data: function() {
    return {
      cols: 1000,
      rows: 10,
      optimized: false,
      msg: "loading...",
      grid: [],
      dataPoints: 0,
      filter: ""
    };
  },
  methods: {
    matches: function(item) {
      return item.value.toLowerCase().indexOf(this.filter.toLowerCase()) > -1;
    },
    visibleCount: function() {
      var count = 0;
      var grid = this.grid;
      for (var i = 0, l = grid.length; i < l; i++) {
        var row = grid[i].items;
        for (var j = 0, k = row.length; j < k; j++) {
          var item = row[j];
          var matched = !this.filter || this.matches(item);
          if (matched) {
            count++;
          }
        }
      }
      return count;
    },
    loadBase: function() {
      localStorage.setItem('optimized',0);
      window.location.reload();
    },
    loadOptimized: function() {
      localStorage.setItem('optimized',1);
      window.location.reload();
    },
    unmount: function() {
      console.profile("unmount");
      var s = window.performance.now();
      this.grid = [];
      setTimeout(() =>{
        this.msg =
          "umount took: " + (window.performance.now() - s).toFixed(2) + "ms";
        console.profileEnd("unmount");
      }, 0);
    },
    rerender: function() {
      var grid = generateGrid(1000, 10);
      var s = window.performance.now();
      console.profile("rerender");
      grid = this.optimized ? Object.freeze(grid) : grid;
      this.grid = grid;
      this.dataPoints = grid.length * grid[0].items.length;
      setTimeout(() =>{
        this.msg =
          "rerender took: " + (window.performance.now() - s).toFixed(2) + "ms";
        console.profileEnd("rerender");
      }, 0);
    }
  },
  created() {
    var ROWS = 1000;
    var COLS = 10;
    var optimized = localStorage.getItem('optimized');
    if(optimized){
      optimized = !!Number(optimized);
    }else{
      optimized = false;
    }
    // console.log(optimized)

    var grid = generateGrid(ROWS, COLS);
    grid = optimized ? Object.freeze(grid) : grid;
    var s = window.performance.now();
    //console.profile("a");

    // console.profileEnd("a");
    this.optimized = optimized;
    this.grid = grid;
    this.dataPoints = grid.length * grid[0].items.length;
    setTimeout(() =>{
      this.msg =
        "initial render took: " +
        (window.performance.now() - s).toFixed(2) +
        "ms";
    }, 0);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
form {
  margin-bottom: 15px;
}

td.hidden {
  color: #ccc;
}

table.filtered td.item {
  background-color: #ffffbf;
}

table.filtered td.item.hidden {
  background-color: transparent;
}
</style>